<!--
 * new page
 * @author: sunYihui
 * @since: 2024-08-30
 * NewsView.vue
-->
<template>
  <div class="body">
    <div class="title">房间管理</div>
    <Table ref="userTable" v-bind="tableConfig">
      <template #search="{ searchSubmit, params }">
        <el-form :inline="true" class="demo-form-inline">

          <el-form-item label="选择楼栋">
            <building @change="(e)=>buildingChange(e,params)"></building>
          </el-form-item>
          <el-form-item label="房间号">
            <el-input style="width:150px" v-model="params.houseno" placeholder="请输入地址" clearable />
          </el-form-item>
          <el-form-item label="房间类型">
            <el-select clearable v-model="params.type" style="width:120px" placeholder="请选择朝向">
              <el-option label="1室" value="1" />
              <el-option label="2室" value="2" />
              <el-option label="3室" value="3" />
              <el-option label="4室" value="1" />
              <el-option label="5室" value="2" />
              <el-option label="6室" value="3" />
              <el-option label="7室" value="1" />
              <el-option label="8室" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="面积">
            <el-input style="width:100px" v-model="params.areas" placeholder="请输入地址" clearable />
            至
            <el-input style="width:100px" v-model="params.areas2" placeholder="请输入地址" clearable />
          </el-form-item>

          <el-form-item label="房间朝向">
            <el-select clearable v-model="params.orientation" style="width:120px" placeholder="请选择朝向">
              <el-option label="朝东" value="朝东" />
              <el-option label="朝西" value="朝西" />
              <el-option label="朝南" value="朝南" />
              <el-option label="朝北" value="朝北" />
              <el-option label="东南" value="东南" />
              <el-option label="西南" value="西南" />
              <el-option label="东北" value="东北" />
              <el-option label="西北" value="西北" />
            </el-select>
          </el-form-item>
         
          <el-form-item>
            <el-button class="search" type="primary" @click="searchSubmit">搜索</el-button>
          </el-form-item>
        </el-form>
      </template>
      <!-- //性别处理 -->
      <template #sex="{ scope }">
        <div> {{ scope.row.sex == 1 ? '男' : '女' }}</div>
      </template>
      <!-- 管理楼栋 -->
      <template #building="{ scope }">
        <div v-for="item in scope.row.building" :key="item.id">{{ item.building }}</div>
      </template>

      <template #buttons="{ deleteAllHandle }">
        <el-button class="add" @click="add">添加</el-button>
        <el-button class="del" @click="deleteAllHandle" type="danger">批量删除</el-button>
      </template>
      <template #operate="{ scope, deleteHandle }">
        <el-button @click="edit(scope.row)" type="primary">修改</el-button>
        <el-button class="delete" @click="deleteHandle(scope.row.id)" type="danger">删除</el-button>
      </template>
    </Table>
    <Add @close="closeHandle" v-bind="updataData" v-if="isShow"></Add>
  </div>
</template>
<script lang='ts' setup>
import Add from '../../components/house/AddView.vue'
import building from '../../components/building/Buildings.vue'
import Table from '../../components/table/TableView.vue'
import { tableConfig } from './house'
import { ref ,reactive} from 'vue'
//通过ref获取表格实例来调用写在表格里面的方法
const userTable = ref<any>();
const isShow = ref(false);

const add = () => {
  isShow.value = true
  Object.assign(updataData, {
    id: null,
    buildingid: null,
    houseno: '',
    areas: null,
    type: '',
    orientation: ""
  })
}

const updataData = reactive<any>([])
const edit = (val: any) => {
  console.log(val);
  
  isShow.value = true,
  Object.assign(updataData, val)

}

const closeHandle = (val: Boolean) => {
  isShow.value = false;
  val && userTable.value.getData()
}

const buildingChange=(e:any,params:any)=>{
console.log(999,e);
params.buildingid=e;
}



</script>
<style scoped lang="less">
@import url(../../assets/styles/baseCss/base.css);
</style>